<template>
  <div class="projects-list">
    <template v-if="listLen === 0">
      <el-empty description="暂无数据" />
    </template>
    <template v-else-if="listLen === -1">
      <loader v-if="loading" color="#fff" />
    </template>
    <template v-else v-for="item in list" :key="item.projectId">
      <div class="content">
        <div class="logo" @click="handleListItemClick(item.projectId)">
          <el-image :src="item.projectLogo || '/src/assets/img/task.png'" />
        </div>
        <div class="centerContent" @click="handleListItemClick(item.projectId)">
          <div class="title">
            <span style="cursor: pointer; letter-spacing: 1.5px">{{ item.projectName }}</span>
            <el-tag v-for="type in getProjectTypes(item.projectType)" :key="type" type="info">{{
              type
            }}</el-tag>
          </div>
          <div class="centerInfo">
            <span style="color: #8796a8; letter-spacing: 1.5px">需要支持/适配的客户端: </span>
            <el-tag v-for="client in item.adaptation" :key="client" type="info">{{
              client
            }}</el-tag>
          </div>
          <div class="bottomInfo">
            <span style="letter-spacing: 1.5px">发布于{{ formatDate(item.createDate) }}</span>
          </div>
        </div>
        <div v-if="item.haveMessage" class="message" @click="toMessage(item.projectId)">
          <img
            src="../../assets/img/message.png"
            alt=""
            style="height: 15px; margin: 95% 10px 10px"
          />
        </div>
        <div @click="deleteProjectButton(item.projectId, item.projectName)">
          <el-button type="danger" text icon="Delete" class="delete">删除</el-button>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { markRaw, onMounted, ref } from 'vue'
import { mapListByState } from '@/utils/map-lists'
import { getMyPro } from '@/service/user/user'
import { codeToProjectType } from '@/mock/tasksquare'
import { deleteProject } from '@/service/project/project'
import { Delete } from '@element-plus/icons-vue'
import Loader from '@/components/loader/loader.vue'

// 接受父组件传来的state值
interface IProps {
  state: string
}
const props = defineProps<IProps>()
const router = useRouter()
const projectsList = ref([])
const list = ref(
  [] as {
    projectId: string
    projectLogo: string
    projectName: string
    projectType: string
    developLanguage: string
    skills: string[]
    createDate: string
    haveMessage: Number
    adaptation?: Array<string>
  }[]
)
const listLen = ref(-1)
const loading = ref(true)

async function loadProjects() {
  loading.value = true
  const res = await getMyPro()
  projectsList.value = res.data
  console.log('项目列表:', projectsList.value)
  if (projectsList.value) {
    if (projectsList.value.length === 0) {
      list.value = []
      listLen.value = 0
      return
    } else {
      const { list: newList, listLen: newLen } = mapListByState(props.state, projectsList.value)
      list.value = newList
      listLen.value = newLen
      loading.value = false
    }
  } else {
    ElMessage.error('网络异常，请刷新重试')
  }
}
onMounted(loadProjects)

function handleListItemClick(id: string) {
  router.push({
    path: '/main/projects/details/' + id,
    query: {
      nowTab: 'info'
    }
  })
}
const toMessage = (id: string) => {
  router.push({
    path: '/main/projects/details/' + id,
    query: {
      nowTab: 'list',
      options: 1
    }
  })
}
function getProjectTypes(typeCodes: string) {
  if (!typeCodes) return ''
  return typeCodes.split('').map((code) => codeToProjectType[code])
}
function formatDate(dateString: string) {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toISOString().split('T')[0]
}
function deleteProjectButton(projectId: string, projectName: string) {
  ElMessageBox.confirm(`是否确定删除项目 "${projectName}"？`, 'Warning', {
    type: 'warning',
    icon: markRaw(Delete)
  })
    .then(async () => {
      try {
        await deleteProject(projectId)
        await loadProjects()
        ElMessage({
          type: 'success',
          message: `删除项目 "${projectName}"成功`
        })
      } catch (error) {
        ElMessage({
          type: 'error',
          message: `删除项目 "${projectName}"失败`
        })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除项目'
      })
    })
}
</script>

<style lang="less" scoped>
.projects-list {
  position: relative;
  min-height: 360px;
  height: 100%;
  .content {
    width: 750px;
    height: 100px;
    box-sizing: border-box;
    padding-top: 9px;
    margin-left: 20px;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #eff2f7;
    .el-image {
      margin: 0 10px;
      width: 130px;
      height: 75px;
      border-radius: 5px;
      overflow: hidden;
      cursor: pointer;
    }
    .centerContent {
      cursor: pointer;
      width: 520px;
      height: 80px;
      .title {
        font-size: 16px;
      }
      .el-tag {
        margin-left: 5px;
      }
      .centerInfo {
        margin: 8px 0 4px 0;
        font-size: 14px;
      }
      .bottomInfo {
        span {
          font-size: 12px;
          color: #8796a8;
          margin-right: 20px;
        }
      }
    }
    .message {
      cursor: pointer;
    }
    .delete {
      margin-top: 25px;
      margin-right: 30px;
      padding: 5px;
      border-radius: 5px;
      z-index: 1;
      position: relative;
      color: #f56c6c;
      border: none;
      background: rgba(0, 0, 0, 0);
      overflow: hidden;
      transition: color 0.4s ease-in-out;
    }

    .delete::before {
      content: '';
      z-index: -1;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1em;
      height: 1em;
      border-radius: 50%;
      background-color: #f56c6c;
      transform-origin: center;
      transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
      transition: transform 0.45s ease-in-out;
    }

    .delete:hover {
      cursor: pointer;
      color: rgb(255, 255, 255);
    }

    .delete:hover::before {
      transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
    }
  }
  .content:hover {
    background-color: #f4f4f5;
  }
}
</style>
